<template>
  <div class="box-card">
    <div slot="header" class="cardHeader">
      <el-radio-group v-model="action" size="small">
        <el-radio-button :label="1">监控分组</el-radio-button>
        <el-radio-button :label="2">监控接入</el-radio-button>
        <el-radio-button :label="3">其他</el-radio-button>
      </el-radio-group>
    </div>
    <el-input
      v-model.trim="filterText"
      size="small"
      prefix-icon="el-icon-search"
      placeholder="请输入搜索项"
      maxlength="30"
      style="margin: 16px 0 0 0"
    />
    <div class="left-title" />
    <el-tree
      ref="tree"
      empty-text="暂无数据"
      :style="{ '--lightOpacity': lightTheme }"
      class="left-tree"
      :data="tree"
      :props="defaultProps"
      :default-expand-all="false"
      :expand-on-click-node="false"
      :highlight-current="true"
      :current-node-key="currentKey"
      :filter-node-method="filterNode"
      node-key="id"
      :default-expanded-keys="expendData"
      @node-click="handleNodeClick"
      v-loading="treeloading"
    >
    </el-tree>
  </div>
</template>

<script>
import { getVideoGroup, qryUserSystemAuth, getVideoMonitorInfo } from '@/api/videoFusion/videoManage'

export default {
  data() {
    return {
      action: 1,
      filterText: '',
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentKey: '',
      expendData: [],
      treeloading: false,
      videoGroup: [],
      videoMonitorInfo: [],
      otherList: []
    }
  },
  computed: {
    lightTheme() {
      return `${this.$store.state.settings.theme}19`
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    action(val) {
      switch (val) {
        case 1:
          this.tree = this.videoGroup
          this.currentKey = this.tree[0] ? this.tree[0].id : ''
          break
        case 2:
          this.tree = this.videoMonitorInfo
          this.currentKey = this.tree[0] ? this.tree[0].id : ''
          break
        case 3:
          this.tree = this.otherList
          this.currentKey = this.tree[0] ? this.tree[0].id : ''
          break
        default:
          break
      }
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.currentKey)
        this.$emit('treeClick', { ...this.tree[0], belongToType: this.action })
      })
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.treeloading = true
      this.getVideoGroup()
      this.qryUserSystemAuth()
      this.getVideoMonitorInfo()
    },
    getVideoGroup() {
      getVideoGroup().then((res) => {
        this.videoGroup = res.data.map((item) => {
          return {
            label: `${item.groupName}(${item.groupCode})`,
            id: item.id
          }
        })
        this.currentKey = this.videoGroup[0].id
        this.tree = this.videoGroup
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentKey)
          this.$emit('treeClick', { ...this.tree[0], belongToType: this.action })
        })
        this.treeloading = false
      }).finally(() => {
        this.treeloading = false
      })
    },
    getVideoMonitorInfo() {
      getVideoMonitorInfo().then((res) => {
        this.videoMonitorInfo = res.data.map((item) => {
          return {
            label: `${item.monitorName}(${item.monitorCode})`,
            id: item.id
          }
        })
      })
    },
    qryUserSystemAuth() {
      qryUserSystemAuth().then((res) => {
        this.otherList = res.data.map((item) => {
          return {
            label: item.systemName,
            id: item.systemId
          }
        })
      })
    },
    handleNodeClick(data) {
      this.$emit('treeClick', { ...data, belongToType: this.action })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
.left-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
}
</style>
